.sys-dialog {
  width: 100%; height: 100%;
  position: absolute; left: 0; top: 0; z-index: 200;
  background: rgba(0, 0, 0, .5); padding: 0 4em;
  display: flex; align-items: center; justify-content: center;
  & > .inner {
    min-width: 200px; position: relative; background: #fff; border-radius: 4px;
    overflow: hidden;
    // & > div:not(:last-child) {}
    .sys-dialog-title {
      line-height: 3em;
      display: flex;
      padding: 0 1em; background: #f3f6f9;
    }
    .msg {
      text-align: center; padding: 1em; overflow: auto;
      max-height: calc(100vh - 200px);
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #eee;
    }
    .wrap-control {
      text-align: center; display: flex;
      & > div {
        user-select: none;
        padding: 1em 0; flex: 1; cursor: pointer;
        &:not(:last-child) {border-right: 1px solid #ddd;}
        &.btn-cancel {}
        &.btn-confirm {
          color: #09f; outline: none;
        }
      }
    }
  }
}

.smart-dialog {
  width: 100%; height: 100%;
  position: absolute; left: 0; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 0 30px;
  background: rgba(0, 0, 0, .5);
  & > * {
    position: relative; border-radius: 4px; overflow: hidden; background: #fff;
    & > div {
      position: relative; z-index: 2;
    }
    .dialog-header {
      display: flex; padding: 0 var(--space-size); line-height: 2.6em; background: #eee;
      border-bottom: 1px solid #ddd; box-shadow: 0 0 5px rgba(0, 0, 0, .1);
      & > .auto-flex {
        font-weight: bold;
      }
    }
    .dialog-body {
      max-height: calc(100vh - 200px); overflow: auto;
      position: relative; z-index: 1;
    }
    .dialog-footer {
      // border-top: 1px solid #ddd;
      box-shadow: 0 0 5px rgba(0, 0, 0, .075);
      padding: .75em var(--space-size); overflow: hidden;
      & > .btn {float: right;}
    }
  }
}

.img-uploader {
  .list-upload-imgs {
    overflow: hidden;
    margin: -5px;
    & > section {
      width: 33.33%;
      float: left;
      padding: 5px;
      & > .inner {
        padding-top: 100%; border-radius: 4px;
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2) inset;
        background: #eee no-repeat center / cover;

        .btn {position: absolute; margin: 0;}
        .btn-pin {left: 1em; top: 1em;}
        .btn-trash {right: 1em; top: 1em;}
        .btn-prev {left: 1em; bottom: 1em;}
        .btn-next {right: 1em; bottom: 1em;}
      }
    }
  }
}

@keyframes loading-rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.smart-loading {
  width: 40px; height: 40px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  & > ul {
    width: 20%; height: 10%;
    position: relative;
    animation: loading-rotate 1s steps(12) infinite;
    & > li {
      width: 100%; height: 100%;
      border-radius: 50%;
      position: absolute; left: 0; top: 0;
      background: rgba(0, 0, 0, .2);
    }
  }
}

.full-screen-loading {
  width: 100%; height: 100%;
  position: absolute; left: 0; top: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .9);
}
